<template>
  <div class="home">
    <!-- 折线图 -->
    <div class="chart" id="line"></div>
    <!-- 柱形图 -->
    <div class="chart" id="bar"></div>
    <!-- 饼状图 -->
    <div class="chart" id="pie"></div>
    <!-- 散点图 -->
    <div class="chart" id="pie2"></div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import * as echarts from "echarts";
export default {
  props: [],
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      arr: "cate/arr",
    }),
  },
  mounted() {
    //请求分类的数据
    this.reqArr().then(() => {
      this.doLine();
      this.doBar();
      this.doPie();
      this.doPie2();
    });
  },
  methods: {
    ...mapActions({
      reqArr: "cate/reqArr",
    }),
    //画折线图
    doLine() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("line"));
      //配置项
      let option = {
        title: {
          text: "分类子类数据展示",
        },
        xAxis: {
          type: "category",
          data: this.arr.map((item) => item.catename),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.arr.map((item) =>
              item.children ? item.children.length : 0
            ),
            type: "line",
          },
        ],
      };
      // 绘制图表
      myChart.setOption(option);
    },

    //画柱形图
    doBar() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("bar"));
      //配置项
      let option = {
        title: {
          text: "分类子类数据展示",
        },
        tooltip: {},
        xAxis: {
          data: this.arr.map((item) => item.catename),
        },
        yAxis: {},
        series: [
          {
            name: "数量",
            type: "bar",
            data: this.arr.map((item) =>
              item.children ? item.children.length : 0
            ),
          },
        ],
      };
      // 绘制图表
      myChart.setOption(option);
    },
    //画饼状图
    doPie() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("pie"));
      //配置项
      let option = {
        title: {
          text: "分类子类数据展示",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "子类数量",
            type: "pie",
            radius: "50%",
            data: this.arr.map((item) => ({
              name: item.catename,
              value: item.children ? item.children.length : 0,
            })),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      // 绘制图表
      myChart.setOption(option);
    },
    //画饼状图2
    doPie2() {
      let colors=['red','orange','yellow','green','lime','blue','purple']
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("pie2"));
      //配置项
      let option = {

        backgroundColor: "#2c343c",
        title: {
          text: "子类数量",
          left: "center",
          top: 20,
          textStyle: {
            color: "#ccc",
          },
        },
        tooltip: {
          trigger: "item",
        },
        visualMap: {
          show: false,
          min: 0,
          max: 300,
         
        },
        series: [
          {
            name: "子类数量",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: this.arr.map((item,index) => ({
              name: item.catename,
              value: item.children ? item.children.length : 0,
              itemStyle:{color:colors[index]}
            })),
            roseType: "radius",
            label: {
              color: "#fff",
            },
            labelLine: {
              lineStyle: {
                color: "#fff",
              },
              smooth: 0.2,
              length: 10,
              length2: 20,
            },
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
          },
        ],
      };
      // 绘制图表
      myChart.setOption(option);
    },
  },
};
</script>
<style scoped lang="less">
@import "../../less/index.less";
.home {
  overflow: hidden;
  .chart {
    width: 48%;
    float: left;
    margin: 10px;
    background: #ccc;
    height: 300px;
  }
}
</style>